<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>医生主页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style type="text/css">
			html {
				background-color: #f6f6f6;
			}
			.top {
				padding-top: 0.48rem;
				text-align: center;
				height: 3.6rem;
				width: 100%;
				background: url(../../images/bg02.png) repeat scroll top left;
				position: relative;
			}
			.top img {
				width: 1.4rem;
				height: 1.4rem;
			}
			.top .Name {
				font-size: 0.3rem;
				color: #333;
			}
			.top .keshi {
				width: 100%;
				position: absolute;
				bottom: 0.2rem;
			}
			.top .keshi text {
				font-size: 0.3rem;
				color: #333;
			}
			
			
			.contain {
				box-sizing: border-box;
				font-size: 0.3rem;
				position: relative;
			}
			.contain .tianchong {
				display: block;
				height: 0.88rem;
				width: 100%;
			}
			#btns {
				position: absolute;
				font-size: 0.3rem;
				width: 100%;
				height: 0.68rem;
				border-bottom: 1px solid #dbdbdb;
				background-color: #fff;
			}
			
			#btns text {
				display: inline-block;
				position: absolute;
				width: 50%;
				height: 0.68rem;
				line-height: 0.68rem;
				text-align: center;
				font-size: 0.3rem;
				color: #333;
			}
			#btns #left {
				left: 0;
			}
			#btns #right {
				right: 0;
			}
			#btns .color {
				color: #2fabd4;
				border-bottom: 2px solid #ee6941;
			}
			#divs {
				border-top: 1px solid #d2d2d2;
				/*background-color: #fff;*/
				height: 0;
			}
			#divs .div .conT {
				padding:  0.4rem;
				color: #666;
				font-size: 0.3rem;
				border-bottom: 1px solid #d2d2d2;
			}
			#divs .div .conT span {
				color: #333;
				font-weight: 700;
			}
			#divs .div  {
				display: none;
				background-color: #fff;
			}
			#divs .div .con {
				padding: 0 0.2rem;
				background-color: #fff;
				height: 1.44rem;
				border-bottom: 1px solid #d2d2d2;
				position: relative;
			}
			#divs .div .con text {
				display: block;
			}
			#divs .div .con .acount {
				position: absolute;
				right: 0.2rem;
				top: 0.52rem;
				height: 0.5rem;
				line-height: 0.5rem;
				width: 1.22rem;
				text-align: center;
				color: #fff;
				border-radius: 0.1rem;
				background-color: #EC6941;
				font-size: 0.24rem;
			}
			#divs .div .con .time {
				font-size: 0.3rem;
				color: #333;
				line-height: 0.5rem;
				height: 0.5rem;
			}
			#divs .div .con .money {
				color: #ec6941;
				font-size: 0.26rem;
				line-height: 0.4rem;
				height: 0.4rem;
			}
			#divs .div .con .surgery {
				font-size: 0.26rem;
				line-height: 0.4rem;
				height: 0.4rem;
				color: #666;
			}
		</style>
		<script type="text/javascript">
			 window.onload = function() {
            var btns = document.getElementById("btns").getElementsByTagName("text");
            var divs = document.getElementById("divs").getElementsByClassName("div");
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i; //自定义属性，用于关联下面的大盒子
                btns[i].onclick = function() {

                    for (var j = 0; j < btns.length; j++) {
                        //把所有的button清空类名
                        btns[j].className = "";
                    }
                    //点击的那个盒子添加指定类名
                    this.className = "color";
                    for (var i = 0; i < divs.length; i++) {
                        //先让底下的div全部隐藏
                        divs[i].style.display = "none";
                    }
                    //然后给当前所点击按钮相关联的盒子添加指定属性
                    divs[this.index].style.display = "block";
                }
            }
        }
		</script>
	</head>
	<body>
		<header>
			<span></span>
			<text class="title">医生主页</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		<section class="top">
			<img src="../../images/photo.png" alt="" />
			<div class="Name">崔雪飞</div>
			<div class="keshi">
				<text class="one">外科</text>
				<text class="two">|</text>
				<text class="three">挂号</text>
				<text class="four">24</text>
			</div>
		</section>
		<section class="contain">
	        <div id="btns">
	            <text class="color" id="left">医生介绍</text>
	            <text id="right">出诊信息</text>
	        </div>
	        <text class="tianchong"></text>
	        <div id="divs">
	            <div class="div" style="display: block;">
	            	<div class="conT">
	            		<text><span>擅长：</span>　擅长于脑梗死、中枢神经系统感染、帕金森、肌病、周围神经病、痴呆等神经科相关疾病诊治。</text>
	            	</div>
	            	<div class="conT">
	            		<text><span>简介：</span>　神经内科医师，2年临床工作经验，曾任职贵阳医学院附属医院神经内科，擅长那那脑梗死、中枢神经系统感染、帕金森、肌病、周围神经病、痴呆等神经科相关疾病诊治。</text>
	            	</div>
	            </div>
	            <div class="div visitPatient">
	            	
	            </div>
	        </div>
	    </section>
	</body>
	<script type="text/javascript">
		var htmlC = document.getElementById("divs").getElementsByClassName("visitPatient")[0].innerHTML;
//		console.log(htmlC)
		for (var i = 0;i < 2;i++) {
			htmlC += '<div class="con">'+
							'<text class="time">06-11 星期日 上午</text>'+	
	            			'<text class="money">挂号费用：4元</text>'+
	            			'<text class="surgery">外科</text>'+
	            			'<text class="acount">总50余26</text>'+
			           '</div>'
					}
//		console.log(htmlC)
		document.getElementById("divs").getElementsByClassName("visitPatient")[0].innerHTML = htmlC;
	</script>
</html>
